<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/mylayer.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
<form class="layui-form layui-form-pane" action="">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">宿舍号</label>
            <div class="layui-input-block">
                <input  lay-verify="required|number" type="text"  id = 'dormitoryId' name="dormitoryId" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">楼号</label>
        <div class="layui-input-inline">
            <select name="buildingId" lay-filter="louhao" id="louhao">
                <option value="">楼号</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-inline">
            <select name="adminId" lay-filter="gunliyuan">
                <option value="">管理员</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <button class="layui-btn" lay-submit lay-filter="demo2">添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<script>
    layui.use('layer', function () {
        var layer = layui.layer;
        layer.ready(function () {
            // 动态加载选择框
            $.post(
                '/student?method=selectbuild',
                function (result) {
                    // 获取 select 元素
                    var select = $('select[name="buildingId"]');
                    // 遍历楼号数据，动态添加选项
                    for (var i = 0; i < result.length; i++) {
                        if (i>0 && result[i].buildingId === result[i-1].buildingId){
                            continue;
                        }
                        var option = $('<option>').val(result[i].buildingId).text(result[i].buildingId + '号楼');
                        select.append(option);
                    }
                    // 重新渲染表单元素（非常重要，否则新添加的选项可能无法显示）
                    layui.form.render('select');
                },
                'json'
            );

        });

    });
</script>

<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var layer = layui.layer;

        // 提交事件
        form.on('submit(demo2)', function (data) {
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用

            // 此处可执行 Ajax 等操作
            $.post(
                '/dormitory?method=addDormitory',
                field,
                function (result){
                    //刷新表格提示信息
                    if (typeof result == 'string') {
                        result = JSON.parse(result);
                    }
                    console.log(result.data);
                    if (result.code === 0){
                        mylayer.okMsg("添加成功");
                        window.parent.location.reload();
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                    }
                }
            );
            return false; // 阻止默认 form 跳转
        });
        form.on('select(louhao)', function (data) {
            var buildId =$("#louhao").val()
            $('select[name="dormitoryId"]').empty();
            $('select[name="adminId"]').empty();
            // 此处可执行 Ajax 等操作
            $.post(
                '/student?method=selectRoom',
                {buildId},
                function (result) {
                    var rooms = result[0];
                    var admins= result[1];
                    // 获取 select 元素
                    var select1 = $('select[name="dormitoryId"]');
                    var select2 = $('select[name="adminId"]');


                    for (var i = 0; i < admins.length; i++) {
                        var option1 = $('<option>').val(admins[i].adminId).text(admins[i].m_name);
                        select2.append(option1);
                    }
                    // 重新渲染表单元素（非常重要，否则新添加的选项可能无法显示）

                    layui.form.render('select');
                },
                'json'
            );
            return false; // 阻止默认 form 跳转

        });
    });
</script>

</body>
</html>
